<template>
    <view v-if="showModal" class="order-modify-modal">
    <!-- 遮罩层 -->
    <view class="modal-mask" @click="closeModal"></view>

    <!-- 弹窗内容 -->
    <view class="modal-content">
      <view class="modal-header">
        <text class="title">修改订单</text>
        <button class="cancel-recruitment-btn" @click="cancelRecruitment">取消招募</button>

      </view>

      <!-- 表单内容区域 -->
      <view class="form-container">
        <!-- 兼职标题 -->
        <view class="form-item">
          <view class="label-wrapper">
            <text class="form-label">兼职标题</text>
            <text class="required">*</text>
          </view>
          <view class="input-wrapper">
            <input class="form-input" v-model="formData.title" placeholder="请输入兼职标题" />
          </view>
        </view>

        <!-- 地点位置 -->
        <view class="form-item">
          <view class="label-wrapper">
            <text class="form-label">地点位置</text>
            <text class="required">*</text>
          </view>
          <!-- 添加@change事件监听地址输入 -->
          <input class="form-input location-input" v-model="formData.address" placeholder="请输入地点位置"
            @change="handleLocationInput" />
          <!-- 地图选择区域 -->
          <navigator url="/pages/release/map-page?from=release">
            <view class="map-section">
              <image class="map-image" :src="getFullImageUrl('@/static/release/map-border.png')" mode="widthFix" />
              <view class="map-overlay">
                <uni-icons type="location-filled" size="18"></uni-icons>
                <text class="map-text">点击选择地点位置</text>
              </view>
            </view>
          </navigator>
        </view>

        <!-- 时间范围 -->
        <view class="form-item">
          <view class="label-wrapper">
            <text class="form-label">时间范围</text>
            <text class="required">*</text>
          </view>
          <!-- 开始时间选择 -->
          <view class="time-picker-container">
            <picker class="date-picker" mode="date" :value="formData.start_time" @change="bindDateChange">
              <view class="picker-text">{{ formData.start_time }}</view>
            </picker>
            <picker class="time-picker" mode="time" :value="formData.time" @change="bindTimeChange">
              <view class="picker-text">{{ formData.time }}</view>
            </picker>
          </view>
          <!-- 结束时间选择 -->
          <view class="time-picker-container" style="margin-top: 20rpx;">
            <picker class="date-picker" mode="date" :value="formData.end_time" @change="bindEndDateChange">
              <view class="picker-text">{{ formData.end_time }}</view>
            </picker>
            <picker class="time-picker" mode="time" :value="formData.endTime" @change="bindEndTimeChange">
              <view class="picker-text">{{ formData.endTime }}</view>
            </picker>
          </view>
        </view>

        <!-- 技能描述 -->
        <view class="form-item">
          <view class="label-wrapper">
            <text class="form-label">技能描述</text>
          </view>
          <view class="input-wrapper">
            <input class="form-input" v-model="formData.skill_desc" placeholder="请输入技能描述" />
          </view>
        </view>

        <!-- 人员要求 -->
        <view class="form-item">
          <view class="label-wrapper">
            <text class="form-label">人员要求</text>
          </view>
          <view class="input-wrapper">
            <input class="form-input" v-model="formData.person_req" placeholder="请输入人员要求" />
          </view>
        </view>

        <!-- 人数 -->
        <view class="form-item">
          <view class="label-wrapper">
            <text class="form-label">人数</text>
            <text class="required">*</text>
          </view>
          <view class="input-wrapper">
            <input class="form-input" v-model.number="formData.people_num" type="number" placeholder="请输入人数" />
          </view>
        </view>

        <!-- 酬金 -->
        <view class="form-item">
          <view class="label-wrapper">
            <text class="form-label">酬金</text>
            <text class="required">*</text>
          </view>
          <view class="input-wrapper">
            <input class="form-input" v-model.number="formData.salary" placeholder="请输入每人的酬金" />
          </view>
        </view>
      </view>


    </view>
    <view class="modal-footer">
      <button class="confirm-btn" @click="confirmModify">确认修改</button>
    </view>
    <!-- 自定义弹窗 - 价格差异确认 -->
    <view v-if="showPriceDiffPopup" class="custom-popup-overlay" @click="closePriceDiffPopup">
      <view class="custom-popup-content" @click.stop>
        <view class="delete-popup">
          <view class="delete-message">
            <text v-if="totalDiff > 0 && oldTotal !== null && newTotal !== null">
              您修改了订单信息，总金额从{{ oldTotal.toFixed(2) }}元变为{{ newTotal.toFixed(2) }}元，需要补差价{{ totalDiff.toFixed(2) }}元。是否确认修改？
            </text>
            <text v-else-if="oldTotal !== null && newTotal !== null">
              您修改了订单信息，总金额从{{ oldTotal.toFixed(2) }}元变为{{ newTotal.toFixed(2) }}元，系统将退还您差价{{ Math.abs(totalDiff).toFixed(2) }}元。是否确认修改？
            </text>
          </view>
          <view class="delete-buttons">
            <view class="can-btn" @click="closePriceDiffPopup">返回</view>
            <view class="con-btn" @tap="confirmPriceDiff">确认</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 自定义弹窗 - 取消招募确认 -->
    <view v-if="showCancelRecruitmentPopup" class="custom-popup-overlay" @click="closeCancelRecruitmentPopup">
      <view class="custom-popup-content" @click.stop>
        <view class="delete-popup">
          <view class="delete-message">
            <text>取消招募后，订单将被关闭，已支付的费用将按规定退还。确定要取消招募吗？</text>
          </view>
          <view class="delete-buttons">
            <view class="can-btn" @click="closeCancelRecruitmentPopup">取消</view>
            <view class="con-btn" @tap="confirmCancelRecruitment">确定</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 取消招募成功 -->
     <SuccessWindow v-if="showSuccessWindow" :content="successContent" />



  </view>
</template>



<script src="./OrderModifyModal.js"></script>
<style lang="scss" src="./OrderModifyModal.scss"></style>
